<template>
  <el-card class="flow-count-status-card">
    <template #header>
      <div class="header">
        <i class="online-icon icon-flow-count-card" />
        <span style="margin-left: 8px">我的审批</span>
      </div>
    </template>
    <el-row type="flex" justify="space-between" align="middle">
      <div
        class="flow-count-card-item"
        v-for="(item, index) in statusItems"
        :key="index"
        @click="onClick(item)"
      >
        <el-image
          class="flow-count-card-item-icon"
          :src="item.icon"
          fit="contain"
          style="width: 64px; height: 64px"
        />
        <div class="flow-count-card-item-content">
          <div class="count">{{ item.count }}</div>
          <div class="title">{{ item.title }}</div>
        </div>
      </div>
    </el-row>
  </el-card>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
import { findTreeNode } from '@/utils';

export default {
  name: 'FlowCountStatusCard',
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      statusItems: [
        {
          icon: require('@/assets/img/runtimeTask.png'),
          count: 0,
          title: '待办任务',
          router: 'formMyTask'
        },
        {
          icon: require('@/assets/img/historicTask.png'),
          count: 0,
          title: '已办任务',
          router: 'formMyApprovedTask'
        },
        {
          icon: require('@/assets/img/allMyWorkOrder.png'),
          count: 0,
          title: '我发起的',
          router: 'flowMyStartedTask'
        },
        {
          icon: require('@/assets/img/copyMessage.png'),
          count: 0,
          title: '我的抄送',
          router: 'formFlowMessage',
          query: { type: 'copyMessage' }
        },
        {
          icon: require('@/assets/img/remindingMessage.png'),
          count: 0,
          title: '我的催办',
          router: 'formFlowMessage',
          query: { type: 'remindingMessage' }
        }
      ]
    };
  },
  methods: {
    onClick(item) {
      if (this.disabled) {
        return;
      }
      let menu = findTreeNode(this.getMenuList, item.router, 'formRouterName');
      if (menu) {
        this.setCurrentMenuId(menu.menuId);
      }
      this.$router.push({
        name: item.router,
        query: item.query
      });
    },
    fetchStatusCounts() {
      // Simulate an API call to fetch status counts
    },
    ...mapMutations(['setCurrentMenuId'])
  },
  computed: {
    ...mapGetters(['getMenuList'])
  },
  mounted() {
    this.fetchStatusCounts();
  }
};
</script>

<style scoped>
.flow-count-card-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}
.flow-count-card-item-content {
  margin-left: 10px;
}
.flow-count-card-item-icon {
  width: 64px;
  height: 64px;
}
.count {
  font-size: 24px;
  color: #000000;
  font-weight: 600;
}
.title {
  font-size: 14px;
  color: #747474;
  margin-top: 4px;
}
.header {
  display: flex;
  align-items: center;
  padding: 20px 0px;
  font-size: 16px;
  color: #222222;
  font-weight: 500;
  border-bottom: 1px solid #f1f1f1;
}
.flow-count-status-card /deep/ .el-card__header {
  padding: 0px 23px;
  border: none !important;
}
.flow-count-status-card /deep/ .el-card__body {
  padding: 20px 23px;
}
</style>
